<template>
  <div v-loading="loading">
    <el-form ref="form" :model="form" :rules="rules" label-width="120px" class="dataForm">
      <el-row>
        <el-col :span="12">
          <el-row>
            <el-col :span="24">
              <el-form-item :label="$t('模板编码')" prop="name">
                <el-input v-model="form.code" :placeholder="$t('模板编码')" show-word-limit maxlength="100" :disabled="form.id !== undefined" />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item :label="$t('模板名称')" prop="name">
                <el-input v-model="form.name" :placeholder="$t('模板名称')" show-word-limit maxlength="100" />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item :label="$t('备注')" prop="name">
                <el-input v-model="form.remark" type="textarea" :placeholder="$t('备注')" show-word-limit maxlength="100" />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item prop="fileId">
                <el-upload
                  class="upload-demo"
                  accept=".docx, .doc, .xml"
                  :multiple="false"
                  :headers="upload.headers"
                  :action="upload.url"
                  :limit="1"
                  :show-file-list="true"
                  :on-success="ocrUploadSuccess"
                  :on-exceed="fileOnExceed"
                  :auto-upload="true"
                  style="color: #1890ff;"
                  :file-list="form.fileBaseList"
                >
                  <el-button size="small" type="primary">{{ $t('上传Word模板') }}</el-button>
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="12">
          <div class="area-header">
            <span class="area-header-title">{{ $t('关键字列表') }}</span>
          </div>
          <el-table class="nowrapTable formTable" :data="form.wordTemplateKeywordList" border>
            <el-table-column align="center">
              <template slot="header" slot-scope="{}">
                <i style="color: #ff4949;margin-right: 4px;">*</i>
                <span>{{ $t('字段名称') }}</span>
              </template>
              <template slot-scope="scope">
                <el-form-item :prop="'wordTemplateKeywordList.' + scope.$index + '.keywordName'" :rules="keywordRules">
                  <el-input v-model="scope.row.keywordName" :placeholder="$t('字段名称')" />
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column align="center">
              <template slot="header" slot-scope="{}">
                <i style="color: #ff4949;margin-right: 4px;">*</i>
                <span>{{ $t('字段编码') }}</span>
              </template>
              <template slot-scope="scope">
                <el-form-item :prop="'wordTemplateKeywordList.' + scope.$index + '.keywordValue'" :rules="keywordRules">
                  <el-input v-model="scope.row.keywordValue" :placeholder="$t('字段编码')" />
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column :label="$t('操作')" align="center" width="80">
              <template slot-scope="scope">
                <el-button size="mini" type="text" icon="el-icon-delete" @click="delKeyword(scope.$index, scope.row)">{{ $t('删除') }}</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="tol">
            <el-button type="primary" icon="el-icon-plus" size="mini" @click="addKeyword">{{ $t('添加') }}</el-button>
          </div>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer" style="text-align: right;">
      <save-btn has-permi="system:word" />
    </div>
  </div>
</template>

<script>
import { saveWordTemplate, getWordTemplate } from '@/api/system/word/template/wordTemplate'
import { config } from '@/utils'
import { getToken } from '@/utils/auth'
export default {
    data() {
      return {
        // 表单参数
        form: {
          wordTemplateKeywordList: []
        },
        uploadSuccess: true,
        // 遮罩层
        loading: false,
        // 表单校验
        rules: {},
        // 模板上传参数
        upload: {
          // 设置上传的请求头部
          headers: { Authorization: 'Bearer ' + getToken() },
          // 上传的地址
          url: config.baseURL + '/word/wordTemplate/uploadTemplate'
        },
        keywordRules: {
          keywordName: [{ required: true, message: this.$t('必填信息'),	trigger: 'blur' }],
          keywordValue: [{ required: true, message: this.$t('必填信息'),	trigger: 'blur' }]
        },
        // 上传的附件集合
        templateFileList: []
      }
    },
    created() {
    },
    methods: {
        // 初始化数据
        init(data) {
            if (data != null && data.id !== undefined) {
                getWordTemplate(data.id).then(response => {
                    this.form = response.data
                    if (this.form.fileBaseList.length > 0) {
                      this.uploadSuccess = false
                    } else {
                      this.uploadSuccess = true
                    }
                })
            } else {
                this.reset()
            }
        },
        // 表单重置
        reset() {
            this.form = {
              id: undefined,
              fileId: undefined,
              name: undefined,
              wordTemplateKeywordList: [],
              remark: undefined,
              createBy: undefined,
              createTime: undefined,
              updateBy: undefined,
              updateTime: undefined,
              delFlag: undefined
            }
            this.resetForm('form')
        },
        // 取消按钮
        cancel() {
            this.$parent.$parent.formOpen = false
            this.$parent.$parent.reset()
        },
        // 关闭form页面
        closeForm() {
            // 关闭form页面遮罩层
            this.loading = false
            // 关闭form页面
            this.$parent.$parent.formOpen = false
            // 刷新list页面
            this.$parent.$parent.getList()
        },
        // 附件上传成功回调
        ocrUploadSuccess(resp) {
          if (resp.code === 200) {
            this.form.fileId = resp.data
            this.$message.success(this.$t('上传成功'))
            this.uploadSuccess = false
          }
        },
        // 超出文件数量限制时触发的方法
        fileOnExceed() {
          this.$message.error(this.$t('请删除文件后上传'))
        },
        // 添加关键字
        addKeyword() {
            const row = {
              keywordName: '',
              keywordValue: ''
            }
            if (!(this.form.wordTemplateKeywordList instanceof Array)) {
              this.$set(this.form, 'wordTemplateKeywordList', [])
            }
            this.$nextTick(() => {
              this.form.wordTemplateKeywordList.push(row)
            })
        },
        delKeyword(index) {
          this.form.wordTemplateKeywordList.splice(index, 1)
        },
        /** 提交按钮 */
        submitForm: function() {
            this.$refs['form'].validate(valid => {
                if (valid) {
                    this.loading = true
                    saveWordTemplate(this.form).then(response => {
                        if (response.code === 200) {
                            this.msgSuccess(this.$t('保存成功'))
                            this.closeForm()
                        } else {
                            this.msgError(response.msg)
                        }
                        this.loading = false
                    })
                } else {
                  this.locationError(document)
                }
            })
        }

    }

}
</script>
